<template>
  <div class="waterBox">
    <div class="water-content">
      <div class="water-header">
        <el-date-picker v-model="year" type="year" value-format="yyyy" placeholder="选择年" style="width:120px;" @change="onSearch">
        </el-date-picker> 年度公共机构用车消耗用量折线分析图
      </div>
      <div class="canvas-box">
        <div class="waterCanvas">
          <div id="kmChart" :style="{width: '2000px', height: '650px'}"></div>
        </div>
        <div class="waterCanvas">
          <div id="oilChart" :style="{width: '2000px', height: '650px'}"></div>
        </div>
        <div class="waterCanvas">
          <div id="thymeOilChart" :style="{width: '2000px', height: '650px'}"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
export default {
  data() {
    return {
      year: new Date().getFullYear() + '',
      kmData: {
        title: { text: '2018年公共机构车辆行驶里程折线分析图', left: "center", textStyle: { fontSize: 15 } },
        toolbox: {
          left: '60',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: -70
          },
          data: []
        },
        grid: {
          left: '3%',
        },
        yAxis: {
          type: 'value',
          nameGap: 50,
          name: '公里数(千米)',
          position: 'left',
          nameLocation: 'center',
          nameTextStyle: {
            padding: [0, 10, 0, 0]
          }
        },
        series: [{
          type: 'line',
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#1e9FFF'
            }
          },
          data: []
        }]
      },
      oilData: {
        title: { text: '2018年公共机构车辆燃油用量折线分析图', left: "center", textStyle: { fontSize: 15 } },
        toolbox: {
          left: '60',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: -70
          },
          data: []
        },
        grid: {
          left: '3%',
        },
        yAxis: {
          type: 'value',
          nameGap: 50,
          name: '燃油用量(升)',
          position: 'left',
          nameLocation: 'center',
          nameTextStyle: {
            padding: [0, 10, 0, 0]
          }
        },
        series: [{
          type: 'line',
          barWidth: 30,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#1e9FFF'
            }
          },
          data: []
        }]
      },
      thymeData: {
        title: { text: '2018年公共机构车辆燃油费用折线分析图', left: "center", textStyle: { fontSize: 15 } },
        toolbox: {
          left: '60',
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: -70
          },
          data: []
        },
        grid: {
          left: '3%',
        },
        yAxis: {
          type: 'value',
          nameGap: 50,
          name: '燃油费用(元)',
          position: 'left',
          nameLocation: 'center',
          nameTextStyle: {
            padding: [0, 10, 0, 0]
          }
        },
        series: [{
          type: 'line',
          barWidth: 30,
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#1e9FFF'
            }
          },
          data: []
        }]
      }
    }
  },
  mounted() {
    this.drawCarOil();
  },
  methods: {
    onSearch() {
      this.init();
    },
    async init() {
      this.kmData.series[0].data = []
      this.oilData.series[0].data = []
      this.thymeData.series[0].data = []
      this.kmData.xAxis.data = []
      this.oilData.xAxis.data = []
      this.thymeData.xAxis.data = []
      const result = await this.$get("/api/InstituionEnergy/statisticsByDepartment", {
        year: this.year,
        departmentName: '',
        includeChild: true
      })
      if (result.length > 0) {
        result.map((i) => {
          this.kmData.xAxis.data.push(i.DepartmentName)
          this.oilData.xAxis.data.push(i.DepartmentName)
          this.thymeData.xAxis.data.push(i.DepartmentName)
          this.kmData.series[0].data.push(i.CarKilometres)
          this.oilData.series[0].data.push(i.CarFuelConsumption)
          this.thymeData.series[0].data.push(i.CarAmount)
          this.drawCarOil()
        })
      }
    },
    drawCarOil() {
      // 基于准备好的dom，初始化echarts实例
      let kmChart = echarts.init(document.getElementById('kmChart'))
      let oilChart = echarts.init(document.getElementById('oilChart'))
      let thymeOilChart = echarts.init(document.getElementById('thymeOilChart'))

      // 绘制图表
      this.kmData.title.text = this.year + '年公共机构车辆行驶里程折线分析图'
      this.oilData.title.text = this.year + '年公共机构车辆燃油用量折线分析图'
      this.thymeData.title.text = this.year + '年公共机构车辆燃油费用折线分析图'
      kmChart.setOption(this.kmData);
      oilChart.setOption(this.oilData)
      thymeOilChart.setOption(this.thymeData)
    }
  },
  created() {
    this.showHome.isShow = false;
    this.onSearch();
  }
}
</script>
<style lang="scss" scoped>
.waterBox {
  width: 100%;
}

.water-content {
  display: flex;
  flex-direction: column;
  padding: 25px 15px;
  flex: 1;
  padding-bottom: 10px;
  .water-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 30px;
  }
}

.canvas-box {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 100%;
  overflow: auto;
  .waterCanvas {
    width: 820px;
    margin-bottom: 30px;
  }
}
</style>